.progress {
    position  : fixed;
    height    : 100%;
    width     : 100%;
    top       : 0;
    right     : 0;
    bottom    : 0;
    left      : 0;
    z-index   : 1000;
    background: #000;
    opacity   : 0.6;
    display   : none;
}

.el-image-viewer {
    position: fixed;
    top     : 0;
    right   : 0;
    bottom  : 0;
    left    : 0;
    z-index : 9999;
    display : none;
}

.swiper-container {
    width     : 100%;
    height    : 100%;
    position  : relative;
    overflow  : hidden;
    list-style: none;
    padding   : 0;
}

.swiper-wrapper {
    position           : relative;
    width              : 100%;
    height             : 100%;
    display            : flex;
    transition-property: transform;
    box-sizing         : content-box;
}

.swiper-slide {
    text-align         : center;
    display            : flex;
    justify-content    : center;
    align-items        : center;
    flex-shrink        : 0;
    width              : 100%;
    height             : 100%;
    position           : relative;
    transition-property: transform;
}

.swiper-button-prev {
    position     : absolute;
    transition   : all .3s;
    background   : #000;
    opacity      : 0.6;
    width        : 50px;
    height       : 50px;
    border-radius: 50%;
    top          : 50%;
    left         : 5%;
    cursor       : pointer;
    z-index      : 10;
}

.swiper-button-prev i {
    width       : 12px;
    height      : 12px;
    border      : 2px solid #fff;
    border-top  : none;
    border-right: none;
    position    : relative;
    top         : 50%;
    left        : 50%;
    display     : block;
    margin-top  : -6px;
    margin-left : -5px;
    transform   : rotate(45deg);
}

.swiper-button-prev:hover {
    background: rgba(177, 189, 198, 0.8);
}

.swiper-button-next {
    position     : absolute;
    transition   : all .3s;
    background   : #000;
    opacity      : 0.6;
    width        : 50px;
    height       : 50px;
    border-radius: 50%;
    top          : 50%;
    right        : 5%;
    cursor       : pointer;
    z-index      : 10;
}

.swiper-button-next i {
    width       : 12px;
    height      : 12px;
    border      : 2px solid #fff;
    border-top  : none;
    border-right: none;
    position    : relative;
    top         : 50%;
    left        : 50%;
    display     : block;
    margin-top  : -6px;
    margin-left : -10px;
    transform   : rotate(-135deg);
}

.swiper-button-next:hover {
    background: rgba(177, 189, 198, 0.8);
}


.swiper-img img {
    max-width : 600px;
    max-height: 800px;
}


.swiper-top-close {
    position     : absolute;
    transition   : all .3s;
    background   : #000;
    opacity      : 0.6;
    width        : 50px;
    height       : 50px;
    border-radius: 50%;
    top          : 5%;
    right        : 5%;
    cursor       : pointer;
    z-index      : 1000;
}

.swiper-top-close:hover {
    background: rgba(177, 189, 198, 0.8);
}

.swiper-top-close p {
    width  : 13px;
    height : 20px;
    padding: 15px 19px;
}

.swiper-top-close p::after {
    content: "\2716";
    color  : #fff;
}